<template>
  <li @click="toPlay">
    <div>{{name}}<span>{{alias}}</span></div>
    <div><span></span><span>{{songer}}-{{name}}</span></div>
    <van-icon name="play-circle-o" id="play" />
  </li>
</template>

<script>
// import {searchSong} from "@/http/api";

export default {
  name: "SearchSongLi",
  data(){
    return {
      songer:'',
    }
  },
  methods:{
    toPlay(){
      this.$router.push({path:'/play',query:{id:this.id,name:this.name,picUrl:this.picUrl}})
    }
  },
  props:{
    name:String,
    alias:String,
    songerList:Array,
    id:Number,
    picUrl:String
  },
  created () {
    if (this.songerList.length !== 0) {
      var  num = 0
      this.songerList.forEach(item => {
        this.songer +=`
        ${ num > 0 ? '/' : ''}${item.name}
      `
        num ++
      })
    }
  },
}
</script>

<style scoped lang="less">
li {
  list-style: none;
  position: relative;
  padding: 10px 10px;
  background-color: #f0f0f0;
  border-radius: 10px;
  margin-bottom: 5px;
  >div:nth-of-type(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    width: calc(100% - 50px);
    >span {
      font-size: 18px;
      color: gray;
    }
  }
  >div:nth-of-type(2) {
    display: flex;
    align-items: center;
    width: calc(100% - 50px);
    >span:nth-of-type(1) {
      display: inline-block;
      height: 15px;
      width: 20px;
      background-image: url(../../public/img/index_icon_2x.png);
      background-position: 1px 2px;
      background-size: 220px;
    }
    >span:nth-of-type(2) {
      color: gray;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  >#play {
    position: absolute;
    top: 12px;
    right: 10px;
    font-size: 30px;
    color: gray;
  }
}
</style>